<template>
  <div>
    <footer v-show="total">
      <el-checkbox v-model="checked"
        >已完成{{ doneLength }} / 全部{{ total }}</el-checkbox
      >
      <el-button type="danger" size="mini" @click="clearAll"
        >清除已完成任务</el-button
      >
    </footer>
  </div>
</template>

<script>
export default {
  name: "FooterBar",
  props: ["ItemList"],
  data() {
    return {};
  },
  methods: {
    clearAll() {
      this.$emit("clearAllTodo");
    },
  },
  computed: {
    total() {
      return this.ItemList.length;
    },
    doneLength() {
      return this.ItemList.reduce(
        (pre, current) => pre + (current.done ? 1 : 0),
        0
      );
    },
    checked: {
      get() {
        return this.doneLength == this.total && this.total > 0;
      },
      set(value) {
        this.ItemList.forEach((item) => {
          item.done = value;
        });
        this.$emit("checkAllTodo", value);
      },
    },
  },
};
</script>

<style lang='less' scoped>
footer {
  margin-top: 10px;
  overflow: hidden;
  .el-checkbox {
    margin: 10px;
    float: left;
  }
  .el-button {
    margin: 10px;
    float: right;
  }
}
</style>